<template>
  <m-page-wrapper>
    <m-crud ref="crudRef" :option="option" @search-reset="handleSearchReset">
      <template #searchFormItem-name="{model}">
        <a-form-item :has-feedback="true" name="name" label="搜索岗位名称">
          <a-input placeholder="请输入岗位名称" v-model:value="model.name" />
        </a-form-item>
      </template>
      <template #searchFormItem-code="{model}">
        <a-form-item :has-feedback="true" name="code" label="搜索岗位编码">
          <a-input placeholder="请输入岗位编码" v-model:value="model.code" />
        </a-form-item>
      </template>
      <template #formItem-name="{model}">
        <a-form-item :has-feedback="true" name="name" label="录入岗位名称">
          <a-input placeholder="请输入岗位名称" v-model:value="model.name" />
        </a-form-item>
      </template>
      <template #formItem-code="{model}">
        <a-form-item :has-feedback="true" name="code" label="录入岗位编码">
          <a-input placeholder="请输入岗位编码" v-model:value="model.code" />
        </a-form-item>
      </template>
      <template #menuLeft>
        <a-space>
          <a-button v-perm="'sys:post:save'" @click="handleAdd" type="primary">
            <template #icon><PlusOutlined/></template>
            新增
          </a-button>
          <a-button type="primary">
            自定义按钮
          </a-button>
        </a-space>
      </template>
      <template #menuCenter>
        我是标题
      </template>
      <!-- <template #table-tableToolbarCenter>表格tableToolbarCenter</template> -->
      <template #menuRight>
        <a-space>
        <a-tooltip>
          <template #title>刷新</template>
          <a-button shape="circle">
            <template #icon>
              <m-icon icon="ReloadOutlined"></m-icon>
            </template>
          </a-button>
        </a-tooltip>
        <a-tooltip>
          <template #title>刷新</template>
          <a-button shape="circle">
            <template #icon>
              <m-icon icon="ReloadOutlined"></m-icon>
            </template>
          </a-button>
        </a-tooltip>
        </a-space>
      </template>
      <template #appendCenter>
        <a-button @click="()=>{crudRef.getDialogRef()?.closeDialog()}">关闭弹窗</a-button>
        <a-button @click="handleCustom(crudRef.getDialogRef())">获取表单数据</a-button>
        <a-button @click="()=>{
          crudRef.getTableRef()?.reload()
        }">刷新列表</a-button>
      </template>
    </m-crud>
  </m-page-wrapper>
</template>
<script setup lang="ts">
import { ref } from 'vue'
import { CrudType } from '/@/components/Crud/types';
import { PlusOutlined } from '@ant-design/icons-vue';
const crudRef = ref()
const option = ref<CrudType>({
  // 弹窗类型
  dialogType: 'drawer',
  // 弹窗属性
  dialogProps: {
    width: '60%'
  },
  // 标题
  title: '岗位',
  // 列表接口
  api: '/sys/post/page',
  // 添加保存接口
  saveApi: '/sys/post/save',
  // 添加保存接口
  updateApi: '/sys/post/update',
  // 删除接口
  delApi: '/sys/post/remove',
  // 添加的权限码
  addPerms: 'sys:post:save',
  // 修改的权限码
  editPerms: 'sys:post:update',
  // 查看的权限码
  viewPerms: 'sys:post:detail',
  // 删除的权限码
  delPerms: 'sys:post:remove',
  // 搜索表单查询按钮文本
  searchOkBtnText: '查询',
  // 搜索表单配置属性
  searchFormProps: {
    layout: 'inline'
  },
  addBtn: true, // 是否显示添加按钮
  // viewBtn: false,
  // editBtn: false,
  // delBtn: false,
  addBtnText: '新增', // 添加按钮
  viewBtnText: '查看',
  columns: [{
    title: 'ID',
    dataIndex: 'id',
    key: 'id',
    list: false,
    add: false,
    component: "Input",
    componentProps: {
      type: 'hidden'
    }
  },{
  title: '岗位名称',
  dataIndex: 'name',
  key: 'name',
  sorter: true,
  defaultSortOrder: 'ascend',
  search: true,
  searchType: "LIKE",
  searchDefaultValue: 'aaa',
  component: 'Input',
  componentProps: {
    allowClear: false,
  },
  searchColumnProps: {
    allowClear: true,
  },
  rules: [{ required: true, message: '请输入岗位名称', trigger: 'blur' }]
},{
  title: '唯一编码',
  dataIndex: 'code',
  key: 'code',
  sorter: true,
  defaultSortOrder: 'ascend',
  search: true,
  searchType: "EQ",
  component: 'Input',
  rules: [{ required: true, message: '请输入唯一编码', trigger: 'blur' }]
},{
  title: '是否启用',
  dataIndex: 'enabled',
  key: 'enabled',
  component: 'Dict',
  search: true,
  searchType: "EQ",
  searchDefaultValue: 1,
  componentProps: {
    code: 'yes_no',
    style: {
      width: '100px'
    }
  },
  rules: [{ required: true, message: '请选择是否启用', trigger: 'blur' }]
}],
actions: [{
  label: '自定义',
},],
dropdownActions: [{
  label: '自定义',
  orderNo: 11
}],
tableProps: {
  showSettings: true
}
})
// 搜索重置按钮
const handleSearchReset = () =>{
  console.log('handleSearchReset')
}
const handleCustom = (dialogRef: any) =>{
  console.log(dialogRef.getFormRef()?.getFieldsValue())
}
const handleAdd = () =>{
  // crudRef.value?.getDialogRef().openDialog({},'add')
  crudRef.value?.openDialog({},'add')
}
</script>
<style lang="less" scoped>

</style>